<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本与图片环绕模式</title>
        <style>
            div{
                width:300px;
                height:300px;
                background: url(./img/3.png);
                background-size:100% 100%;
                /* 浮动：让元素飘起来，元素脱离文档流 */
                float:left;
            }
        </style>
    </head>
    <body>
        <div></div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique ipsum odio ipsam modi, totam beatae nesciunt, molestiae autem deleniti, nostrum aliquid officiis? Id autem quam ipsum fugiat debitis, voluptates ab.
        Eius quo rerum atque eos enim, molestiae nisi! Porro, dolorem obcaecati, architecto numquam natus aut, minus dolor laborum itaque reiciendis labore nostrum veritatis vel ex ipsum explicabo assumenda. Aut, delectus!
        Illum voluptatem, aliquam doloremque fuga vel eaque dolor? Placeat obcaecati incidunt autem quas at! Corrupti aliquid, quam iste rerum eligendi ipsa non maxime incidunt hic inventore dolore velit corporis veniam.
        Nihil tempore temporibus corporis cum nam delectus porro omnis, unde vel repudiandae veniam ratione, a neque inventore illum impedit consequuntur, maiores corrupti dolorum culpa alias minima doloribus. Consequatur, fugit repellat.
        Natus corporis nemo ex et iste ducimus iusto minima ad dicta quod, eveniet recusandae veritatis ut officia! Vel reiciendis, itaque omnis porro quae ad, magnam quisquam dignissimos aliquam nemo nulla.
    </body>
</html>